body {
    position: relative;
}

.color-red{
    color:#ea2241 !important;
}
.el-wh-check {
    color: #a1a1a1;
    &.color-red {
        color: $active-color;
    }
}

.wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #3f00b2;
    .bg-box {
        min-height: 100%;
        width: 100%;
        height: auto;
        position: relative;
        img {
            width: 100%;
        }
    }
    .active-rule {
        cursor: pointer;
        position: absolute;
        right: 0;
        display: inline-block;
        width: auto;
        min-height: pxrem(39);
        padding: pxrem(8) pxrem(19);
        line-height: 1;
        @include font-dpr(12px);
        background:linear-gradient(90deg,rgb(255,211,1),rgb(255,234,0));
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.48);
        text-align: center;
        color: #1c1992;
        border-bottom-left-radius: pxrem(39/2);
        border-top-left-radius: pxrem(39/2);
        &:hover {
            color: #1c1992;
        }
    }
}

#masking,
#tips {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#tips {
    display: none;
    z-index: 110;
    span {
        max-width: 100%;
        position: absolute;
        z-index: 111;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        display: inline-block;
        padding: 20px;
        background: rgba(0, 0, 0, 0.5);
        text-align: justify;
        @include font-dpr(14px);
        border-radius: pxrem(20);
    }
}

input {    
    width: pxrem(502);
    height: pxrem(60);
    line-height: normal;
    vertical-align: middle;
    @include font-dpr(14px);
    text-indent: 1em;
    padding-right: 1em;
    margin: pxrem(30) 0;
    background-color: #e4e3e3;
    border: none;
    outline: none;
    border-radius: pxrem(4);
    &.shortCut {
        width: pxrem(274);
    }
}

.err-tips {
    height: pxrem(32);
    line-height: pxrem(32);
    color: rgb(255, 66, 66);
    margin-top: pxrem(16);
}

.panel {
    &.in {
        display: none;
    }
    width: 100%;
    @include clearF;
    position: relative;
    .panel-title {
        height: pxrem(56);
        line-height: pxrem(56);
        @include font-dpr(16px);
        width: 100%;
        position: absolute;
        z-index: 2;
        color: #fff;
        background: $header-bg-color;
        text-align: left;
        border-top-right-radius: pxrem(20);
        border-top-left-radius: pxrem(20);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.33);
    }
    .panel-body {
        background: #fff;
        border-radius: pxrem(20);
        padding-top: pxrem(56);
    }
    .panel-footer {       
        background: #fff;
        padding: pxrem(50) 0;
    }
}

.dialog {
    display: none;
    box-shadow:none;
    background: transparent;
    border:none;
    .close {
        cursor: pointer;
        width: pxrem(64);
        height: pxrem(64);
        overflow: hidden;
        display: block;
        position: absolute;
        top: pxrem(-40);
        right: pxrem(-40);
        i {
            @include font-dpr(30px);
            color: #8c8c8c;
            &:hover,
            &:active {
                color: #8c8c8c - #333;
            }
        }
    }
    width:pxrem(590);
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    z-index:105;
    .panel-title {
        cursor: pointer;
        text-align: center;
        height: pxrem(120);
        line-height: pxrem(120);
        border-top-right-radius: pxrem(50);
        border-top-left-radius: pxrem(50);
        @include font-dpr(23px);
    }
    .panel-body {
        @include font-dpr(14px);
        padding-top: pxrem(120);
        border: 0;
        border-radius: pxrem(50) pxrem(50) 0 0;
        overflow: hidden;
        box-shadow: 0 pxrem(-2) pxrem(2) pxrem(-2) rgba(0,0,0,0.67);      
    }
    .panel-footer {
        margin-top:-2px;
        box-shadow: 0 pxrem(15) pxrem(12) pxrem(-15) rgba(0,0,0,0.67); 
        border-bottom-right-radius: pxrem(50);
        border-bottom-left-radius: pxrem(50);
    }
    &.myAlert {
        .panel-body {
            padding-top: pxrem(56);
            .lose {
                height: pxrem(60);
                text-align: center;
                img {
                    width: pxrem(64);
                    height: pxrem(60);
                }
            }
        }
    }
    //中奖提示
    &.myRegister{
        .panel-body {
            padding-top: pxrem(56);
            .register {
                height: pxrem(157);
                text-align: center;
                img {
                    width: pxrem(235);
                    height: pxrem(157);
                }
            }
            p{
                margin-top:pxrem(25);
                font-weight: 500;
                @include font-dpr(22px);
                color:$active-color;
                line-height:1;
            }
        }
    }
}

.btn {
    margin: 0 auto;
    @include font-dpr(24px);
    text-align: center;
    cursor: pointer;
    &.grey {
        background-color: #cecece;
        box-shadow: 0 pxrem(10) 0 rgba(156, 156, 156, 0.57), 0 pxrem(5) pxrem(6) rgba(0, 0, 0, 0.57);
        color: #8e8e8e;
        &:active {
            box-shadow: 0 pxrem(3) 0 rgba(156, 156, 156, 0.57), 0 pxrem(3) pxrem(4) rgba(0, 0, 0, 0.57);
        }
    }
    &.yellow {
        color: rgb(163, 65, 0);
        background: $btn-yellow-bg;
        box-shadow: 0 pxrem(10) 0 rgba(255, 228, 34, 0.57), 0 pxrem(5) pxrem(6) rgba(0, 0, 0, 0.57);
        &:active {
            box-shadow: 0 pxrem(3) 0 rgba(255, 228, 34, 0.57), 0 pxrem(3) pxrem(4) rgba(0, 0, 0, 0.57);
        }
    }
    &.red {
        color: #fff;
        @include font-dpr(16px);
        background: $btn-red-bg;
        box-shadow: 0 pxrem(10) 0 rgba(243, 4, 32, 0.8), 0 pxrem(5) pxrem(6) rgba(0, 0, 0, 0.57);
        &:active {
            box-shadow: 0 pxrem(3) 0 rgba(238, 50, 72, 0.57), 0 pxrem(3) pxrem(4) rgba(0, 0, 0, 0.57);
        }
    }
}

.btn-hg {
    width: pxrem(686);
    height: pxrem(102);
    line-height: pxrem(102);
    border-radius: pxrem(50);
}

.btn-lg {
    @include btnWH(502, 80);
}

.btn-md-long {
    @include btnWH(612, 68);
}

.btn-md {
    @include btnWH(467, 68);
}

.btn-sm {
    @include btnWH(236, 68);
}

.a-link {
    cursor: pointer;
    color: #D6D019;
    text-decoration: underline;
}

table {
    width: 100%;
    td,
    th {
        text-align: center;
        color: #f0e800;
        border: 1px solid #6971da;
        @include font-dpr(12px);
        line-height: pxrem(60);
        text-align: center;
        &:first-of-type{
            padding-right: pxrem(2);
            padding-left:pxrem(2);
        }
    }
}

//倒计时
#time-count {
    overflow: hidden;
    .time-list {
        overflow: hidden;
        li {
            float: left;
            height: pxrem(48);
            width: pxrem(48);
            line-height: pxrem(48);
            @include font-dpr(13px);
            &.time-wrap {
                position: relative;
                overflow: hidden;
                .up {
                    position: absolute;
                    top: -1px;
                    height: pxrem(24);
                    width: 100%;
                    background: url(../images/up.png) bottom center no-repeat;
                    background-size: 100% auto;
                    background-color: $transparent-color;
                    overflow: hidden;
                    line-height: pxrem(48);
                    @include font-dpr(14px);
                    font-weight: bold;
                }
                .down {
                    position: absolute;
                    bottom: 0;
                    height: pxrem(23);
                    width: 100%;
                    background: url(../images/down.png) top center no-repeat;
                    background-size: 100% auto;
                    background-color: $transparent-color;
                    overflow: hidden;
                    line-height: pxrem(48);
                    @include font-dpr(14px);
                    font-weight: bold;
                    .down-wrap {
                        margin-top: -51%;
                    }
                }
            }
        }
    }
}

.loading {
    display: none;
    width: pxrem(100);
    height: pxrem(100);
    position: absolute;
    z-index: 120;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    span {
        display: inline-block;
        width: pxrem(16);
        height: pxrem(16);
        border-radius: 50%;
        background: #fff;
        position: absolute;
        -webkit-animation: load 1.04s ease infinite;
        &:nth-child(1) {
            left: 0;
            top: 50%;
            margin-top: pxrem(-8);
            -webkit-animation-delay: 0.13s;
        }
        &:nth-child(2) {
            left: pxrem(14);
            top: pxrem(14);
            -webkit-animation-delay: 0.26s;
        }
        &:nth-child(3) {
            left: 50%;
            top: 0;
            margin-left: pxrem(-8);
            -webkit-animation-delay: 0.39s;
        }
        &:nth-child(4) {
            top: pxrem(14);
            right: pxrem(14);
            -webkit-animation-delay: 0.52s;
        }
        &:nth-child(5) {
            right: 0;
            top: 50%;
            margin-top: pxrem(-8);
            -webkit-animation-delay: 0.65s;
        }
        &:nth-child(6) {
            right: pxrem(14);
            bottom: pxrem(14);
            -webkit-animation-delay: 0.78s;
        }
        &:nth-child(7) {
            bottom: 0;
            left: 50%;
            margin-left: pxrem(-8);
            -webkit-animation-delay: 0.91s;
        }
        &:nth-child(8) {
            bottom: pxrem(14);
            left: pxrem(14);
            -webkit-animation-delay: 1.04s;
        }
    }
}

//loading动画
@-webkit-keyframes load {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}

//省市区选择
#areaSel {
    z-index: 109;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    text-align: left;
    @include font-dpr(15px);
    color: #000;
    line-height: pxrem(60);
    padding: pxrem(60);
    border-top: 1px solid #ccc;
    font-weight: 500;
    .btn-wrap {
        overflow: hidden;
        color: #3f00b2;
        #cancelArea {
            cursor: pointer;
            float: left;
            width: auto;
            @include clearF;
            padding: pxrem(10) pxrem(20);
        }
        #confirmArea {
            cursor: pointer;
            float: right;
            width: auto;
            @include clearF;
            padding: pxrem(10) pxrem(20);
        }
    }
    #maskLoading {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        .loading {
            display: block;
        }
    }
    #showArea {
        height: pxrem(60);
        line-height: pxrem(60);
        white-space: nowrap;
        span {
            padding: 0 pxrem(5);
            min-width: pxrem(100);
            cursor:pointer;
            &:hover{
                color: #a700e4;
            }
        }
        border-bottom:1px solid #3f00b2;
        margin-bottom:pxrem(20);
    }
    #areaListWrap {
        height:calc(100% - #{pxrem(60)});
        overflow: auto;
    }
    #areaList {
        padding-left: 1em;
        li{
            cursor: pointer;
        }
        li:active {
            color: #a700e4;
        }
    }
}

//adn样式
.my-androids{
    .bg-box .title-box .active-time-wrap,
    .btn
    {
        padding-top:2px;
    }
    #time-count .time-list li.time-wrap .up,
    #time-count .time-list li.time-wrap .down .down-wrap{
        padding-top:1.5px;
    }
} 

